<template>
  <div class="canvas-wrapper" ref="d3">
    
    
        <div class="bottom">
      <button @click="handleDanjiangkou">丹江口</button>
      <button @click="handleMotuo">墨脱</button>
    </div>
  </div>
</template>

<style >
.canvas-wrapper{
  width: 100%;  
  height: 100%;
  position: relative;
}
.canvas-wrapper canvas{
    width: 100%;
    height: 100%;
  }
  .bottom {
    position: absolute;
    bottom: 1px;
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
</style>
<script setup lang="ts">
import { onMounted,ref, type Ref } from 'vue';
import { initScene } from '../components/initScene';
import { initWind } from '../components/windwalk';
const d3:Ref<HTMLElement> = ref(null);
const mapControl: {
    mapflyto?: (center: number[], height?: number) => void;
}= {

}
// 按钮点击事件处理函数
const handleDanjiangkou = () => {
  console.log('丹江口按钮被点击');
  
  if(mapControl.mapflyto){
    mapControl.mapflyto([111.489803, 32.556104], 1000)
  }
  // 在这里添加丹江口相关的逻辑
};

const handleMotuo = () => {
  if(mapControl.mapflyto){
    mapControl.mapflyto([95.328321, 29.324524],500)
  }
  console.log('墨脱按钮被点击');
  // 在这里添加墨脱相关的逻辑
};

const stage =  initScene({
  directLight:1
});
onMounted(()=>{
  d3.value.appendChild (stage.renderer.domElement);
  stage.resize()
  const res  =  initWind(stage);
  Object.assign(mapControl,res);
})
</script>
